<script setup lang="ts">
import { onMounted, ref } from 'vue';

/**
 Template Ref与TS
  - 模板 ref 需要通过一个显式指定的泛型参数，建议默认值 null

  模板中使用ref:
  - 要指定明确类型, 比如:  const iptRef = ref<HTMLInputElement | null>(null)
  - 要注意类型安全: 只有有值才调用DOM对象的属性或方法
    - 方案: 可选链 或 类型守卫
 */
const iptRef = ref<HTMLInputElement | null>(null)
// iptRef.value?.focus()

onMounted(() => {
  // 1. 可选链 ? 
  // iptRef.value?.focus()

  // 2. 类型守卫 做判断
  if (iptRef.value) {
    // 只有有值才调用DOM对象的属性或方法
    iptRef.value.focus()
  }
})
</script>

<template>
  <input ref="iptRef" type="text">
</template>

<style scoped></style>
